<template>

	<view class="register">
		<view class="boxLogin">
			<u-top-tips ref="uTips"></u-top-tips>
			<view >
				<text class="h2">注册</text>
			</view>
			<view  class="mt-10">
				<small>一起发现大世界\(^o^)/~</small>
			</view>
			<view >
				<u-form :model="form" class="formLogin mt-20" :rules="rules" ref="uForm">
					<u-form-item prop="username">
						<u-input v-model="form.username" placeholder="用户名" />
					</u-form-item>
					<u-form-item prop="phone">
						<u-input v-model="form.phone" placeholder="手机号" />
					</u-form-item>
					<u-form-item prop="smsCode">
						<!-- 验证码输入框 -->
						<u-message-input class="smsPassword" mode="bottomLine" size='20' :maxlength="6"
						@finish="finish" @change='copySms' :value="form.smsCode" :bold="false" :breathe="hehe"></u-message-input>
					</u-form-item>
				
					<u-button plain type="success" @click="getPassword">获取验证码</u-button>
					<view class="mt-10">
						<u-button  type="primary"  @click="submit">立即注册</u-button>
					</view>
				</u-form>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					phone: '',
					password: '123456',
					smsCode:'',
					confirmPassword: '123456'
				},
				hehe:false,
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							message: '请输入正确的手机格式',
							trigger: ['change', 'blur'],
						}
					],
					username: [{
						required: true,
						message: '请输入用户名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}],

				}
			};
		},
		onReady() {
			// 启用表单输入框验证
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			copySms(value){//验证码输入时触发的回调
				this.hehe=true
				this.form.smsCode=value
			},
			finish(value) {//验证码输入完的回调
				this.hehe=false
				this.$refs.uTips.show({
					title: '输入完成，值为：' + value,
					type: 'success'
				})
			},
			getPassword() {//获得验证码
				if (this.form.phone.length !== 11) {
					this.$refs.uTips.show({
						duration: 3000,
						title: '请输入正确的手机格式',
						type: 'warning'
					});
					return 0;
				}
		
				this.$api.hadsms({
					phone: this.form.phone
				}).then(
					(res) => {				
							this.$api.smspass({
									phone: this.form.phone
								})
								.then(
									(res) => {		
										if(res!==0){
											this.$refs.uTips.show({
													duration: 3000,
													title: '验证码已发送请注意查收',
													type: 'success'
												});
										}									
									},
									(err) => {
										console.log(err)
									}
								);
					}
				);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$api.register(this.form).then(
							(res) => {	
									this.$refs.uTips.show({
										duration: 3000,
										title: '注册成功',
										type: 'success'
									})
							},
							(err) => {
								console.log(err);
							}
						);
					} else {
						console.log('验证失败');
					}
				});
			}
		},

	};
</script>

<style lang="scss">
	.boxLogin {
		margin: 100rpx auto;
		width: 80vw;

		.formLogin {
			width: 80vw;
		}

		.login-footer {
			width: 80vw;
		}
        .h2{
			font-size: 50rpx;
		}
		.smsPassword {
			height: 50px;
			width: 300px;
			overflow: hidden;
			display: flex !important;
			flex-wrap: nowrap;

		}
		
	}
</style>
